<template>
  <div class="table center-box aa">
      <div id="c1">

      </div>
      <div class="table-cell">
        <div class="center-form">
          <router-link to="/home" class="cf-logo pc-vertical"><img :src="logo" ></router-link>
          <p class="title">找回密码</p>
          <!-- 账号密码登陆 -->
          <div class="form-box" v-if="isAccount">
            <p class="desc">找回密码</p>
            <el-form ref="form" :rules="rules" class="form-box" :model="form" label-width="80px">
                <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号" v-model.trim="form.phone" class="input-with-select">
                    </el-input>
                </el-form-item>
                <el-form-item class="yzm" prop="yzm">
                    <el-input placeholder="请输入验证码" v-model.trim="form.yzm" class="input-with-select"></el-input>
                    <div class="box">
                        <a v-if="isYZMShow" href="javascript:;" class="btn-get-code" @click="getYZM">获取短信验证码</a>
                        <div v-else class="timer">
                          {{ time }} s
                        </div>
                    </div>
                  </el-form-item>
                <el-form-item prop="pass">
                    <el-input type="password" placeholder="新密码" v-model.trim="form.pass" class="input-with-select">
                    </el-input>
                </el-form-item>
                <el-form-item prop="newpass">
                    <el-input type="password" placeholder="确认新密码" v-model.trim="form.newpass" class="input-with-select">
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <div class="fb-submit">
                        <button class="btn-submit" type="button" @click="submitForm('form')">找回密码</button>
                      </div>
                </el-form-item>
              </el-form>
           <div class="other-choice">
          或 
          <router-link to="/userLogin" class="">去登陆</router-link></div>
          </div>
        </div>
      </div>
      <copy></copy>
  </div>
</template>

<script>
import logo from "@/assets/images/logo.png";
import copy from "@/components/copyRight.vue";
export default {
    components: {
        copy
    },
    data () {
          var validatephone = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('手机号不能为空'));
            }
            if(!(/^1[3456789]\d{9}$/.test(value))){
              return callback(new Error('手机号格式不正确!'));
            }
            callback();
          };
          var validateyzm = (rule, value, callback) => {
            if (!value) {
              return callback(new Error('验证码不能为空'));
            }
            
            callback();
          };
          var validateemail = (rule, value, callback) => {
           
            if (!value) {
              return callback(new Error('邮箱不能为空！'));
            }
            if(!(/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(value))){
              return callback(new Error('邮箱格式不正确!'));
            }
            callback();
          };
          var validatepass = (rule, value, callback) => {
            
            if (!value) {
              return callback(new Error('密码不能为空'));
            }
            
            callback();
          };
          var validatenewpass = (rule, value, callback) => {
            
            if (!value) {
              return callback(new Error('密码不能为空'));
            }
            if(value != this.form.pass){
              return callback(new Error('重复密码不通过!'));
            }
            callback();
          };
          return {
            phoneArea:"中国+86",
            isYZMShow:true,
            isAccount:true,
            iptType:"password",
            logo,
            time:60,
            form: {
              phone:"",
              yzm:"",
              email:"",
              pass:"",
              newpass:""
            },
            form1: {
              phone:"",
              yzm:"",
            },
            rules: {
              phone: [
                { validator: validatephone, trigger: 'blur' }
              ],
              yzm: [
                { validator: validateyzm, trigger: 'blur' }
              ],
              email: [
                { validator: validateemail, trigger: 'blur' }
              ],
              pass: [
                { validator: validatepass, trigger: 'blur' }
              ],
              newpass: [
                { validator: validatenewpass, trigger: 'blur' }
              ],
            },
              myCaptcha:'',
          }
        },
        methods: {
          onSubmit() {
            console.log('submit!');
          },
          postMes(){
            this.$ajax.post("/user/retrieve",{
              mobile:this.form.phone,
                verifyCode:this.form.yzm,
                pwd:this.form.pass,
                confirmPwd:this.form.newpass,
              },)
              .then((res)=>{
               
                if(res.data.code == 0){
                  this.$message({
                    message: '密码重置成功!',
                    type: 'success'
                  });
                  this.$router.push("/userLogin");
                  // window.location.href = "register-bus-step02.html";
                }else[
                  this.$message.error(res.data.msg)
                ]
              })
          },
          postYZM(){
            this.$ajax.post("/user/sendMobileCode",{
                type:2,
                mobile:this.form.phone
              },)
              .then((res)=>{
               
                if(res.data.code == 0){
                  this.$message({
                    message: '验证码发送成功!',
                    type: 'success'
                  });
                  //this.$router.push("/home");
                }else[
                  this.$message.error(res.data.msg)
                ]
              })
          },
          submitForm(formName) {
            this.$refs[formName].validate((valid) => {
              if (valid) {
                  this.postMes();
              } else {
                console.log('error submit!!');
                return false;
              }
            });
          },
          getYZM(){
            this.$refs.form.validateField("phone", (errMsg) => {
               if (errMsg) {
                   
               }else{
                   this.myCaptcha.reload();
                   this.myCaptcha.show();
               }
           })
            
          },
          changeIptType(){
            this.iptType == "password" ? this.iptType = "text" : this.iptType = "password"
          },
          changeLoginType(val){
            if(val == 1){
              this.$refs["form1"].resetFields();
              this.isAccount = !this.isAccount;
            }else{
              this.$refs["form"].resetFields();
              this.isAccount = !this.isAccount;
            }
          }
        },
    mounted() {
        this.myCaptcha = _dx.Captcha(document.getElementById('c1'), {
            appId: '064c0824fa2e57bd1251f527ea54523f', //appId，在控制台中“应用管理”或“应用配置”模块获取
            style:'popup',
            _noLogo: true,
            success:  (token)=> {
                this.myCaptcha.hide();
                this.postYZM();
                this.isYZMShow = !this.isYZMShow;
                let i = 60;
                var timer = setInterval(()=>{
                    i -- ;
                    if(i == 0){
                        this.isYZMShow = !this.isYZMShow;
                        clearInterval(timer);
                        i = 60;
                    }else{
                        this.time = i;
                    }

                },1000)
            }
        });
    }
}
</script>

<style scoped>
    #c1{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate3d(-50%,-50%,0);
        z-index: 999999;
    }
</style>